<template>
  <ul class="todo-list">
    <li :class="{'completed': item.idDone}" v-for="item in showList" :key="item.id">
      <div class="view">
        <input class="toggle" type="checkbox" v-model="item.idDone"/>
        <label>{{item.name}}</label>
        <button class="destroy" @click="destory(item)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
import {mapState,mapGetters} from "vuex"
export default {
  computed:{
    ...mapState("todoMain",["todiList"]),
    ...mapGetters(["showList"]),
  },
  methods:{
    destory(item){
      console.log(11);
      const list=  this.$store.state.todoMain.todiList.filter(ele=>{
        return ele.id!=item.id
      })
      this.$store.commit("todoMain/addTodoListArray",list)
    }
  }

}
</script>
